<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">

          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              router>
            <el-submenu index="1" v-for="m in menus" :key="m.id">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{m.name}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item v-for="c in m.children" :index="c.path" :key="c.id">{{ c.name }}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>

        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
          <el-footer></el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "indexView",
  data(){
    return{
      menus:[]
    }
  },methods:{
    list(){
      this.axios.get("menu/list").then(res=>{
        this.menus=res.data.data;
      })
    }
  },created() {
    this.list();
  }
}
</script>

<style scoped>

</style>